/* jQuery事件绑定必须放置在函数中 */
$(function() {
	init();
	// 使用jQuery进行隔行换色
	// $("tbody tr").odd().css("background-color", "lightbule");

	// a href="javascript:void(0); :禁止刷新当前页面
	// 使用jQuery动态删除当前数据
	$(".del").click(function() {
		// console.log($(this).parent().parent().html());
		if (confirm("确认删除当前数据吗?")) {
			// 删除
			// this 当前dom元素
			$(this).parent().parent().remove();
		}
	});

	// jQuery 鼠标移进(mouseover、mouseenter)、移出事件(mouseout、mouseleave)
	// mouseover 和 mouseout 一套使用；	mouseenter 和 mouseleave一套使用
	// mouseover 和 mouseenter 区别：mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
	//                               mouseenter 事件只在鼠标移动到选取的元素上时触发。


	// 搜索查询
	$("#sous").click(function() {
		// 获取搜索文本框值
		var $search = $("[name='search']").val();
		// console.log($search);
		if ($search == '') {
			// 默认查询所有
			init();
		}
		// alert($search);
		// 使用jQuery获取dom元素所有中签编码
		var $markNo = $(".markNo");
		// console.log($markNo);
		$markNo.each(function(i) {
			var mNo = $($markNo.get(i)).text();
			// console.log(mNo);
			if ($search == mNo) {
				var $tr = $("tbody tr").eq(i);
				// console.log($tr);
				$("tbody").html($tr);
			}
		});
	});
});

function init() {
	// $(".checkUser").click(function(){
	// 	alert("请填写完整用户信息!!!")
	// });
	// 添加数据单击事件
	$("#submit button:first").click(function() {
		var $inputs = $("[name='input']");
		$inputs.each(function(i) {
			if ($($inputs[i]).val() == "") {
				alert("请填写完整的用户信息!!!");
			}
		});
	});

	// 初始加载列表数据
	// js操作dom元素 --> jquery也可以操作dom元素
	// ECMAScript 坚持ES,ES6(ECMAScript版本名称)
	// js定义数据类型关键字，var是ES5之前定义数据类型关键字，ES6建议使用let定义数据类型关键字
	// 需求：将前端页面静态数据更改成动态数据
	// 使用json数据存储一个对象
	var arrStatus = new Array("已持照", "未持照")
	var jsonTr = {
		"userName": "张小雨",
		"markNo": "hb99971228",
		"status": "0",
		"phone": "18774556690",
		"openDate": "2021-07-04"
	}
	var jsonTrArrs = [{
			"userName": "胡应修",
			"markNo": "bj53473409",
			"status": "1",
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"userName": "尚晶晶",
			"markNo": "bj45562320",
			"status": "1",
			"phone": "18732365599",
			"openDate": "2021-07-05"
		},
		{
			"userName": "冯灰宏",
			"markNo": "fj633009sdf",
			"status": "1",
			"phone": "13250504432",
			"openDate": "2021-07-03"
		},
		{
			"userName": "温暖",
			"markNo": "sh93452821",
			"status": "1",
			"phone": "12325643634",
			"openDate": "2021-07-02"
		},
		{
			"userName": "景然",
			"markNo": "tj923452821",
			"status": "0",
			"phone": "13250504432",
			"openDate": "2021-07-01"
		}
	]
	let $tr = `<tr>
					<td>${jsonTr.userName}</td>
					<td class="markNo">${jsonTr.markNo}</td>
					<td>${arrStatus[jsonTr.status]}</td>
					<td>${jsonTr.phone}</td>
					<td>${jsonTr.openDate}</td>
					<td>
						<a href="">详情</a>
						<a href="javascript:void(0);" class="del">删除</a>
					</td>
				</tr>`;

	// 循环遍历json对象数组
	var $TrStr = "";
	// $().each(function(){});
	$(jsonTrArrs).each(function(index) {
		var arrJson = jsonTrArrs[index];
		$TrStr += `<tr>
					<td>${arrJson.userName}</td>
					<td class="markNo">${arrJson.markNo}</td>
					<td>${arrStatus[arrJson.status]}</td>
					<td>${arrJson.phone}</td>
					<td>${arrJson.openDate}</td>
					<td>
						<a href="">详情</a>
						<a href="javascript:void(0);" class="del">删除</a>
					</td>
				</tr>`;
	});

	// jQuery绑定dom元素
	// $("tbody").append($tr);
	$("tbody").html($TrStr);

	// 需求：鼠标移动到当前显示行，加深背景颜色
	$("tbody tr").mouseover(function() {
		// $(this).css("background-color","aqua");
		$(this).addClass("bg")
	});
	$("tbody tr").mouseout(function() {
		// $(this).css("background-color","transparent");
		$(this).removeClass("bg");
	});

	// click mouseover mouseout 属于单个事件；hover 鼠标移进、移出事件，属于 复合事件
	$("tbody tr").hover(function() {
		$(this).css("border", "1px solid green");
	}, function() {
		$(this).css("border", "1px solid black")
	});
}
